<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/loader.js"></script>
    <meta name="cdnload" content="vue,element-ui-js,element-ui-css,snapdom" />
    <title>252-地图切片截图</title>
    <style>
      body {
        margin: 0;
      }
      #container {
        width: 100vw;
        height: 100vh;
      }
      #opt {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999999;
      }
      .images_box {
        display: grid;
      }
      .images_box img {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="中心点">
          <el-input v-model.trim="formData.center" placeholder="经度,纬度"></el-input>
          <a href="https://lbs.amap.com/tools/picker" target="_blank">高德地图点位拾取</a>
        </el-form-item>
        <el-form-item label="地图层级">
          <el-input-number v-model="formData.mapZoom" :min="5" :max="18"></el-input-number>
        </el-form-item>
        <el-form-item label="区块大小">
          <el-input-number v-model="formData.areaSize" :min="500" :max="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="区块单边数量">
          <el-input-number v-model="formData.areaEdgeCount" :min="1" :max="99"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="preview">预览</el-button>
          <el-button type="success" @click="onSubmit">立即创建</el-button>
          <el-button v-if="exportCanvasWidth" @click="downHandle">下载图片</el-button>
          <el-progress v-if="createPercentage > 0" :percentage="createPercentage"></el-progress>
        </el-form-item>
      </el-form>
      <div class="images_box"></div>
      <div v-if="type == 1" id="preview-container" key="1"></div>
      <div v-if="type == 2" id="create-container" key="2"></div>
    </div>
    <script type="module" src="./252-main.js"></script>
  </body>
</html>
